<template>
  <a-row :gutter="10">
    <a-col :md="12" :sm="24">
      <a-row >
        <a-card :bordered="false">
          <div style="width: 80%;"><pie-charts id="pieOrder" ref="pieCharts" title="办结情况"></pie-charts></div>
          <div style="width: 80%;"><line-charts id="lineOrder"  ref="lineCharts" title="近7日工单数变化曲线"></line-charts></div>


        </a-card>
      </a-row>
      <a-row >
        <a-card :bordered="false" style='margin-top: 10px'>
          <a-spin :spinning='downLoading' tip=" 正在提交，请耐心等待">
          <a-textarea
            v-model="content"
            placeholder="概要"
            :auto-size="{ minRows: 5}"
          />
          </a-spin>
          <a-button type='primary' style='float:right;margin-top: 10px' @click='submit'>提交</a-button>
        </a-card>

      </a-row>

    </a-col>
    <a-col :md="12" :sm="24">
      <a-card :bordered="false">
        <a-alert type="info" >
          <template slot='message'>
            <a-row >
              <a-col :span='8'>总工单：{{ statistics.total }}</a-col>
              <a-col :span='8'>办结率：{{statistics.completionRate}}</a-col>
              <a-col :span='8'>环比：{{statistics.annulus}}</a-col>
            </a-row>
          </template>
        </a-alert>
        <a-tabs default-active-key="1" >
          <a-tab-pane key="1" tab="信访构成一览表">
            <statistics-table ref='sTable' :data-source='dataSource' :layout-y='540'></statistics-table>
          </a-tab-pane>
          <a-tab-pane key="2" tab="重要信访填写" force-render>
            <a-table
              ref='table'
              size='middle'
              :layout-y='540'
              bordered
              childrenColumnName='childrenColumnName'
              :columns='columns'
              :dataSource='dataSource2'
              :loading='loading'
              :pagination="false"
            >
            </a-table>
          </a-tab-pane>
        </a-tabs>
<!--       -->
      </a-card>

    </a-col>
  </a-row>
</template>

<script>
import ReportsEpidemicDailyService from '@/myService/ReportsEpidemicDailyService'
import StatisticsTable from '@views/data-governance/smart-reports/epidemic-daily/components/StatisticsTable'
import PieCharts from '@views/data-governance/smart-reports/epidemic-daily/components/PieCharts'
import LineCharts from '@views/data-governance/smart-reports/epidemic-daily/components/LineCharts'
import moment from 'moment'


export default {
  name: 'AdminAdd',
  components:{
    StatisticsTable,
    PieCharts,
    LineCharts
  },
  data(){
    return{
      downLoading:false,
      ds:this.$route.query.ds,
      dataSource:[],
      dataSource2:[],
      loading:false,
      columns:[
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (text, row, index) => 1 + index
        },
        {
          title: '诉求',
          dataIndex: 'content',
          align: 'center',
        },
        {
          title: '处置情况说明',
          align: 'center',
          dataIndex: 'contentExplain',

        }
      ],
      content:'',
      statistics:{}
    }
  },

  created() {
    this.getStatisticsWeekData();
    this.getReportsEpidemicStatistics();
    this.loadDate();
    this.loadDate2();
    this.getSummary();
  },
  methods:{
    submit(){
      let data={
        summary:this.content,
        ds:this.ds
      }
      this.downLoading=true
      ReportsEpidemicDailyService.submitSummary(data).finally(()=>{
        this.$message.success("提交成功")
        this.downLoading=false
        this.$router.push('/report/admin-epidemic-daily-home')
      })
    },
    loadDate(){
      ReportsEpidemicDailyService.getCategoryTemplateStatistics(this.ds).then(res=>{
        if (res.success) {
          this.dataSource = res.result.records || res.result
        }
        else {
          this.$message.warning(res.message)
        }
      })
    },
    loadDate2(){
      this.loading=true;
      ReportsEpidemicDailyService.getReportsEpidemicHandleOrder(this.ds).then(res=>{
        if (res.success) {
          this.dataSource2 = res.result.records || res.result
        }
        else {
          this.$message.warning(res.message)
        }
      }).finally(()=>{
        this.loading=false;
      })
    },
    getStatisticsWeekData(){
      ReportsEpidemicDailyService.getStatisticsWeekData(this.ds).then(res=>{
        this.$refs.lineCharts.setDate(res.result)
      })
    },
    getReportsEpidemicStatistics(){
      ReportsEpidemicDailyService.getReportsEpidemicStatistics(this.ds).then(res=>{
        this.statistics=res.result
        this.pieData=[
          {
            value:parseInt(this.statistics.total)-parseInt(this.statistics.unfinished),
            name:'办结量'
          },
          {
            value:parseInt(this.statistics.unfinished),
            name:'未办结'
          }]
        this.$refs.pieCharts.setDate(this.pieData)
      })
    },
    getSummary(){
      ReportsEpidemicDailyService.getSummary(this.ds).then(res=>{
        this.content=res.result
      })
    },
  }
}
</script>

<style scoped>

</style>